<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>1对1聊天示例</title>
</head>
<body>
    <input type="text" id="message" placeholder="输入消息"> <!-- 输入框，用于输入消息 -->
    <input type="text" id="receiverId" placeholder="输入接收人ID"> <!-- 输入框，用于输入接收者ID -->
    <button onclick="sendMessage()">发送</button> <!-- 发送按钮，点击触发sendMessage函数 -->
    <div id="chat"></div> <!-- 聊天窗口，用于显示聊天记录 -->

    <script>
		var TestUserID=Math.floor(Math.random());
        var socket = new WebSocket('ws://192.168.248.128:8000?user_id='+TestUserID); // 创建WebSocket对象，连接到服务器的WebSocket地址
		console.log("测试用户ID="+TestUserID);
        socket.onopen = function () {
            console.log('连接成功'); // 当连接成功时，在控制台打印出提示信息
        };

        socket.onmessage = function (event) {
            var message = event.data; // 获取收到的消息
            var chatDiv = document.getElementById('chat'); // 获取聊天窗口元素
            chatDiv.innerHTML += '<p>' + message + '</p>'; // 在聊天窗口中添加一条新的消息记录
        };

        function sendMessage() {
            var messageInput = document.getElementById('message'); // 获取输入框元素
            var receiverIdInput = document.getElementById('receiverId'); // 获取接收者ID输入框元素
            
            var message = {
                receiver_id: receiverIdInput.value, // 获取接收者ID
                content: messageInput.value // 获取输入框中的消息内容
            };

            socket.send(JSON.stringify(message)); // 将消息发送给服务器
            
            messageInput.value = ''; // 清空输入框
            receiverIdInput.value = ''; // 清空接收者ID输入框
        }
    </script>
</body>
</html>
